import React, { Component } from 'react'
// just for test
import cnchar from 'cnchar'
import 'cnchar-draw'

class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			char: '',
		}
	}
	handleChange = (e) => {
		this.setState({ char: e.target.value[e.target.value.length - 1] })
	}
	handleKeyPress = (e) => {
		if (e.charCode !== 13) return
		this.drawChar()
	}
	drawChar() {
		try {
			cnchar.draw(this.state.char, {
				type: 'animation',
				el: '.container',
				style: {
					length: 500,
				},
			})
		} catch (err) {
			alert(err)
		}
	}
	render() {
		return (
			<div className='App'>
				<div className='container'></div>
				<input
					type='text'
					onChange={this.handleChange}
					value={this.state.char}
					onKeyPress={this.handleKeyPress}
					className='input-field'
				/>
			</div>
		)
	}
}

export default App
